<template>
  <div class="music-search-list">
    <el-dialog
      v-model="useStore.isMusicSearchList"
      width="min(90%,550px)"
      :show-close="true"
      center
    >
      <div class="search-head">
        <el-input
          v-model="data.input"
          placeholder="请输入歌名或歌手"
          clearable
          @keydown.enter="handleSearch"
        />
        <el-button round @click="handleSearch">搜索</el-button>
      </div>
      <el-scrollbar height="400px" style="margin-top: 10px">
        <el-empty
          v-if="data.musicSearchList.length === 0"
          description="搜索你喜欢的歌吧"
        />
        <div
          v-else
          class="music-list-item"
          v-for="(item, index) in data.musicSearchList"
          :key="index"
          @click="clickPlay(item)"
        >
          <p>
            {{ item.name }}
          </p>
          <p class="music-author">
            <span v-for="(a, index) in item.ar" :key="index">
              {{ a.name }}-
            </span>
            {{ item.al.name }}
          </p>
          <svg class="icon bf-icon" aria-hidden="true">
            <use xlink:href="#icon-bofang_o"></use>
          </svg>
          <svg
            class="icon bf-icon1"
            aria-hidden="true"
            @click.stop="addMusic(item)"
          >
            <use xlink:href="#icon-jiahao1"></use>
          </svg>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { onMounted, onUpdated, reactive, watch } from "vue";
import { useHomeStore } from "@/stores/home";
import axios from "axios";
const useStore = useHomeStore();
const data = reactive({
  input: "",
  musicSearchList: [],
});
const handleSearch = () => {
  console.log(data.input);
  axios
    .get(`/music-api/cloudsearch?keywords=${data.input}`)
    .then((item) => {
      data.musicSearchList = item.data.result.songs;
    });
};
const clickPlay = (item) => {
  // console.log(item);
  useStore.bf_List = item;
  addMusic(item)
  // console.log(useStore.bf_List);
};
function pushObject(arr, obj) {
  const index = arr.findIndex((item) => item.id === obj.id);
  if (index !== -1) {
    arr.splice(index, 1);
  }
  arr.push(obj);
  return arr;
}
const addMusic = (item) => {
  const newArr = {
    id: item.id,
    name: item.name,
    al: item.al,
    ar: item.ar,
  };
  if(useStore.musicList.length <= 30){
    useStore.musicList = pushObject(useStore.musicList, newArr);
    ElMessage({
    showClose: true,
    message: '添加歌单成功',
    type: 'success',
  })
  }else{
    ElMessage({
    showClose: true,
    message: '添加歌单不能超过30首！',
    type: 'error',
  })
  }
};



</script>
 
<style lang="less">
.search-head {
  display: flex;
  .el-input {
    margin-right: 10px;
  }
}
.music-list-item {
  position: relative;
  cursor: pointer;
  height: 45px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #efefef;
  p:nth-child(1) {
    font-size: 17px;
  }
  .music-author {
    transform: scale(0.8);
    margin-left: -55px;
  }
  .icon {
    width: 30px;
    height: 30px;
  }
  .bf-icon {
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .bf-icon1 {
    position: absolute;
    top: 3px;
    right: 50px;
    width: 25px;
    height: 25px;
    padding: 5px;
  }
  .bf-icon1:hover {
    background-color: #efefef;
    border-radius: 50%;
  }
}
</style>
<style>
.el-dialog {
  border-radius: 12px !important;
}
</style>
